<!DOCTYPE html>
<html>
  <head>
    <title>JSX spread</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script src="react/build/react.js"></script>
    <script src="react/build/react-dom.js"></script>
    <script src="babel/browser.js"></script>
    <script type="text/babel">
      var FancyLink = React.createClass({        
        render: function() {
          
          /*
          var attr = {
            href: 'http://example.org',
            target: '_blank',
          };
          
          
          // return <a {...attr}>Hello</a>;
          
          return (
            <a 
              href={attr.href}
              target={attr.target}>
              Hello
            </a>
          );
          */
          
          /*
          switch(this.props.size) {
            // do something based on the `size` prop
          }

          var attribs = Object.assign({}, this.props); // shallow clone
          delete attribs.size;
          */
          
          var {size, ...attribs} = this.props;
          
          switch(size) {
            // do something based on the `size` prop
          }

          return <a {...attribs}>{this.props.children}</a>;        
        }
      });
      
      ReactDOM.render(
        <div>
          <FancyLink 
            href="http://example.org" 
            style={{color: "red"}}
            target="_blank"
            size="medium">
            Hello
          </FancyLink>
        </div>,
        document.getElementById('app')
      );
    </script>
  </body>
</html>